import { useEffect, useMemo, useState } from "react";
import ReactDom from "react-dom";

function Modal({ children }) {
	const el = useMemo(() => document.createElement("div"), []);
	useEffect(() => {
		document.getElementById("portal-root").appendChild(el);
		return () => {
			document.getElementById("portal-root").removeChild(el);
		};
	}, [el]);
	return ReactDom.createPortal(children, el);
}
function Parent() {
	const [count, setCount] = useState(0);
	return (
		<div
			onClick={() => {
				setCount(count + 1);
			}}>
			<he>{count}</he>
			<p>当你点击一个不是在这个div里面的按钮，它却会触发onClick事件</p>
			<Modal>
				<Child />
			</Modal>
		</div>
	);
}
function Child() {
	return <button>Child Click</button>;
}
export default function PortalBubbleDemo() {
	return <Parent />;
}
